<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <p v-if="seen">Now you see me</p>
        <br />
        <!--参数-->
        <a v-bind:href="url">我的url是{{url}}</a>
        <br />
        <a v-on:click="url = 'baz'">请点击我...</a>

        <!--动态参数-->
        <a v-bind:[attributeName]="url"> ... </a>
        <a v-on:[eventName]="doSomething"> ... </a>

        <!--修饰符,修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
            例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()-->
        <form v-on:submit.prevent="onSubmit">...</form>
    </div>

    <script type="text/javascript">
        //指令 (Directives) 是带有 v- 前缀的特殊特性。
        //指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
        //指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

        var vue = new Vue({
            el: '#app',
            data: {
                //seen: 1 == 2
                seen: 1 == 1,
                url: "https://www.baidu.com"
            }
        });
    </script>
</body>

</html>